<template>
    <div v-loading="loading" class="map-table-box">
        <el-select
            v-model="form.types"
            clearable
            filterable
            multiple
            collapse-tags
            placeholder="楼宇名称"
            @change="typesFilter"
        >
            <template #prefix>
                <el-icon><search /></el-icon>
            </template>
            <el-option v-for="(item, index) in totalDatas" :key="index" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
        <div class="mt20">
            <el-button type="primary" plain :disabled="!multipleSelection.length" @click="removePremise(true)">
                设为已选
            </el-button>
            <el-button plain :disabled="!multipleSelection.length" @click="removePremise(false)"> 设为未选 </el-button>
        </div>

        <!-- <el-table
            ref="tableBox"
            class="mt10 base-table"
            :table-list="tableList"
            :data="tableData"
            :select-show="true"
            :row-key="rowKey"
            :max-height="tableHeight"
            :border="true"
            @handleSeletionChange="handleSeletionChange"
            @refresh="sortChange"
        >
            <el-table-column type="section" width="55"></el-table-column>
            <el-table-column> </el-table-column>
        </el-table> -->
        <XcTable
            id="map-table"
            border
            class="mt10 base-table"
            is-selectable
            :height="tableHeight"
            :columns="columns"
            :data="tableData"
            @selection-change="handleSeletionChange"
        >
            <template #selected="{ row }">
                {{ row.selected === 0 ? '未选' : '已选' }}
            </template>
        </XcTable>
    </div>
</template>

<script>
// import BaseTable from '@/components/common/BaseTable';
import { sortByLocaleCompare } from '@/utils/common';
import { mapState } from 'vuex';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import { addBuilding, deleteBuilding } from '@/api/plan.ts';
import { setTableMaxHeight } from '@/utils/common.ts';

export default {
    name: 'MapPointsTable',
    components: {
        XcTable,
        // BaseTable,
    },
    props: {
        totalDatas: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            loading: false,
            tableList: [{ label: '楼盘名称', prop: 'name', showOverflowTooltip: true, sortable: 'custom' }],
            totalData: [],
            tableData: [],
            rowKey: 'premisesId',
            multipleSelection: [],
            tableDataLength: 0,
            form: {
                types: [],
            },
            // tableHeight: document.documentElement.clientHeight * 0.4,
            dataDic: {
                D0032: [],
            },
            columns: [
                {
                    label: '楼盘名称',
                    key: 'name',
                    prop: {
                        sortable: true,
                        width: 145,
                    },
                },
                {
                    label: '状态',
                    key: 'selected',
                    render: true,
                    prop: {
                        sortable: true,
                    },
                },
            ],
            tableHeight: 300,
        };
    },
    computed: {
        ...mapState('plan', ['planId']),
    },
    watch: {
        totalDatas: {
            handler(val) {
                this.totalData = this.totalDatas;
                this.typesFilter();
            },
            deep: true,
            immediate: true,
        },

        totalData: {
            handler(val) {
                this.$emit('getSelectedPoint', val);
            },
            deep: true,
        },
    },
    mounted() {
        // this.tableHeight =
        //     document.documentElement.clientHeight * 0.4 > 400 ? 400 : document.documentElement.clientHeight * 0.4;
        // window.onresize = () => {
        //     this.tableHeight =
        //         document.documentElement.clientHeight * 0.4 > 400 ? 400 : document.documentElement.clientHeight * 0.4;
        // };

        // this.tableHeight = this.tableHeight + 'px';
        setTimeout(() => {
            this.tableHeight = setTableMaxHeight('map-table', 130);
            console.log(this.tableHeight);
        }, 200);
    },
    methods: {
        // 多选
        handleSeletionChange(val) {
            this.multipleSelection = val;
            this.tableDataLength = val.length;
        },
        // 清除楼盘类型选择
        cleartypesFilter() {
            this.form.types = [];
        },
        // 楼盘类型筛选
        // clearSelection 是否清空选择
        typesFilter(clearSelection = true) {
            if (this.$refs.tableBox) {
                if (clearSelection) {
                    this.$refs.tableBox.clearSelection();
                }
                this.$refs.tableBox.clearSort();
            }
            this.loading = true;
            if (this.form.types.length === 0) {
                this.tableData = this.totalData;
            } else {
                this.tableData = this.totalData.filter((item) => {
                    return this.form.types.includes(item.id);
                });
            }
            this.loading = false;
        },

        // 移除
        // type =true 代表清空未选，fals代表移除已选
        async removePremise(type) {
            let selectedId = this.multipleSelection.map((item) => item.id);

            // this.typesFilter(!type);

            const params = {
                planId: this.planId,
                premisesIdList: selectedId,
            };
            if (type) {
                await addBuilding(params);
            } else {
                await deleteBuilding(params);
            }
            this.$emit('refresh');
            this.$message.success('操作成功');
        },
        // 排序
        sortChange(sorts) {
            const sortProps = this.tableList.filter((item) => item.sortable === 'custom').map((item) => item.prop);
            if (sortProps.includes(sorts.sortFiled)) {
                let rev = sorts.sortValue === 'desc' ? -1 : 1;
                let data = JSON.parse(JSON.stringify(this.tableData));
                data.sort(sortByLocaleCompare(sorts.sortFiled, rev));
                this.tableData = data;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.map-table-box {
    // height: 556px;

    box-sizing: border-box;
    .input-label {
        font-size: 14px;
        line-height: 28px;
        color: #333;
    }
}
.mt20 {
    margin: 20px 0 10px;
}
::v-deep .base-table {
    .el-table {
        overflow-y: auto;
    }
}
</style>
